<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-07 22:24:27
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-06-30 22:11:02
 * @FilePath: \dance\components\f-navbar\f-navbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="navbar">
    <view class="navbar-placeholder"></view>
    <view class="navbar-fixed" :style="[style]">
      <view class="navbar-content" :style="{ backgroundColor: page.includes('index/index') ? '#ff7a66' : '' }">
        <view class="navbar-content-box">
          <!-- <view class="uv-nav-slot">
					  <text class="mr-10">{{ ajaxData.city }}</text>
					  <uv-icon name="jiantou" custom-prefix="custom-icon" color="#fff" size="18"></uv-icon>
					</view> -->
          <image style="width: 142rpx; height: 142rpx" src="@/static/img/index.png"></image>
        </view>
        <text class="title">{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  let envVersion = '';
  // #ifdef MP-WEIXIN
  const { miniProgram } = uni.getAccountInfoSync();
  envVersion = miniProgram.envVersion;
  // #endif
  let title = ref('');
  title.value = envVersion === 'release' ? '去卡' : '测试去卡';
  let page = computed(() => {
    return uni.$uv.page();
  });
  // 获取推荐偏好
  let style = computed(() => {
    const style = {};
    // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
    style.top = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight, 'px');
    return uni.$uv.deepMerge(style);
  });
</script>

<style lang="scss" scoped>
  .navbar {
    position: relative;
    &-placeholder {
      height: 101rpx;
    }
    &-fixed {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 11;
      width: 100%;
    }
    &-content {
      height: 101rpx;
      display: flex;
      align-items: center;
      color: #fff;
      &-box {
        margin-left: 169rpx;
      }
      .uv-nav-slot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        padding: 6rpx 14rpx;
        line-height: 1.5;
        border-radius: 56rpx;
        border: 1rpx rgba(126, 126, 126, 0.4) solid;
        margin-right: 0.5451rem;
        background-color: rgba(0, 0, 0, 0.13);
        height: 70rpx;
        font-size: 38rpx;
        box-sizing: border-box;
      }
      .title {
        font-size: 38rpx;
        font-weight: bold;
        margin-left: 35rpx;
      }
    }
  }
</style>
